<template>
  <div class="pad">
     <el-page-header @back="goBack" :content="videoList[0].enterpriseName">
    </el-page-header>
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">{{
        videoList[0].enterpriseName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>视频列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <div class="head-search m-t-b">
      <div class="s-left">
        <el-input
          style="width: 280px; margin-right: 15px;"
          placeholder="输入视频标题搜索"
          v-model="searchText"
          @input="clearSearch"
          @keypress.native.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch" :loading="videoLoading">
          <i class="el-icon-search"></i>
          搜索
        </el-button>
      </div>
      <el-button type="primary" @click="goAddVideo">
        <i class="el-icon-plus"></i>
        添加视频
      </el-button>
    </div> -->
    
    <div class="firm_card" >
      <el-card class="elcard" v-for="(item, id) in videoList" :key="id" >
        <div @click.stop="lookArticle(item.knowledgeId)">
            <img :src="item.knowledgePic" alt="" width="276" height="185" />
        </div>
        <div id="card_icon">

          <el-tooltip class="item" effect="dark" content="修改文章" placement="bottom">
            <el-button class="iii el-icon-edit" @click="editArticle(item)"></el-button>
          </el-tooltip>
          <!-- <el-tooltip class="item" effect="dark" content="设为广告" placement="bottom">
            <el-button class="iii el-icon-s-promotion" @click="setToAd(item)"></el-button>
          </el-tooltip>  -->

          <!-- <el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0" class="item" effect="dark" content="设为轮播" placement="bottom">
            <el-button class="iii el-icon-camera-solid isShow1" @click="showChange(item,$event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.isSlideshow == 1 && item.knowledgeStatus == 1 && item.knowledgeLife != 0" class="item" effect="dark" content="禁用轮播" placement="bottom">
            <el-button class="iii el-icon-camera-solid isShow2" @click="showChange(item,$event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.isSlideshow !== 1 && item.knowledgeLife == 0" class="item" effect="dark" content="无法操作" placement="bottom">
            <el-button disabled class="iii el-icon-camera-solid isShow3"></el-button>
          </el-tooltip> -->

          <el-tooltip v-if="item.knowledgeLife == 1" class="item" effect="dark" content="禁用" placement="bottom">
            <el-button class="iii el-icon-switch-button shutdown" @click="handleChange(item, $event)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="item.knowledgeLife !== 1" class="item" effect="dark" content="启用 " placement="bottom">
            <el-button class="iii el-icon-switch-button shutdown2" @click="handleChange(item, $event)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="修改浏览/收藏量" placement="bottom">
            <el-button class="iii el-icon-s-management" @click="editCollectNum(item)"></el-button>
          </el-tooltip>

          <el-popover v-if="item.knowledgeStatus == 0" class="i_ex" placement="bottom" width="240" trigger="click">
             <div>
              <el-button type="primary" @click="checkAuthorityStatus(item, 1, 1)"
              >通过审核
              </el-button
              >
              <el-button type="danger" @click="checkAuthorityStatus(item, 2, 0)"
              >驳回审核
              </el-button
              >
            </div>
            <el-button id="check1" class=" el-icon-s-check iii" slot="reference"></el-button>
          </el-popover>
          <el-popover v-if="item.knowledgeStatus == 1" class="i_ex" placement="bottom" width="110" trigger="click">
             <div>
              <el-button type="danger" @click="checkAuthorityStatus(item, 3, 0)"
              >管理员禁用
              </el-button
              >
            </div>
            <el-button id="check2" class="el-icon-s-check iii" slot="reference"></el-button>
          </el-popover>

        </div>
        

        <div class="card_text">
					<p class="el_name">{{ item.knowledgeName }}</p>
					<p class="el_like">
						<i class="el-icon-view"></i>{{ item.totalBrowNum }}
						<i class="el-icon-star-off"></i>{{ item.totalCollectNum }}
					</p>
					<p class="el_time">创建时间：{{ item.createDate }}</p>
				<!-- <p class="el_id">用户编号：{{ item.id }}</p> -->
				</div>


        <span class="el_status1" v-if="item.knowledgeStatus == 0">待审核</span>
        <span class="el_status2" v-else-if="item.knowledgeStatus == 1"
          >审核通过</span
        >
        <span class="el_status3" v-else-if="item.knowledgeStatus == 2"
          >审核失败</span
        >
        <span class="el_status4" v-else-if="item.knowledgeStatus == 3"
          >管理员禁用</span
        >



      </el-card>
    </div>
    


    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      background
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="videoTotal"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  getKnowledgeList,
  changeAuthorityStatus,
  changeShowStatus
} from '../api/version2';
import {
  formatDate
} from '../util';
export default {
  name: 'VideoList',
  data () {
    return {
      videoList: [],
      videoLoading: false,
      pageSize: 10,
      videoTotal: 0,
      searchText: '',
      enterpriseId: null,
      roleTitle: '',
      

    }
  },
  methods: {
    // 修改浏览、收藏量
    editCollectNum(row) {
      console.log(row);
      this.editNum = true;
      this.knowledgeId = row.knowledgeId;
      this.collectData.collectNum = row.fakeCollectionNumber;
      this.collectData.browNum = row.fakeBrowseNumber;
    },
     handleChange(data, e) {
      // alert(123)
      // if(data.knowledgeStatus != 1 && roleTitle != '超级管理员'){

      console.log(data);
      console.log(e);
      // 改变状态
      this.$confirm(
        `${data.knowledgeLife!=1 ? "启用" : "禁用"}该视频后, ${
          e ? "该视频可在客户端正常展示" : "该视频不在客户端展示"
        }`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((r) => {
          // if (this.roleTitle == "超级管理员") {
          //   this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3, 0);
          // } else {
          this.fetchSetStatus1(data.knowledgeId,data.knowledgeLife!=1 ? 1 : 0, 0);
          // }
        })
        .catch((err) => {
          data.enable = !e;
        });

      // }else{
      //   this.$message.warning("你没权限");
      // }
    },
    fetchSetStatus1(knowledgeId,Life) {
      // 设置显示状态
      changeShowStatus({
        knowledgeId: knowledgeId,
        // knowledgeType: type,
        knowledgeLife: Life,
      })
        .then((res) => {
          // console.log(res);
          this.$message.success("操作成功");
          this.fetchKnowledgeList(1);
        })
        .catch((e) => {});
    },
    // 设为广告
    setToAd(row) {
      // console.log(row);
      this.isShowAdSetting = true;
      this.ad.knowledgeId = row.knowledgeId;
      getAdTitle({
        knowledgeId: row.knowledgeId,
      }).then((res) => {
        // console.log(res);
        this.advertisingList = res.data.data || [];
      });
    },
     lookArticle(id) {
      // 查看文章详情
      this.$router.push(`/operation/article/detail/${id}`);
    },
     editArticle(article) {
      // console.log(article);
      // 修改文章
      this.$router.push("/operation/add/?id=" + article.knowledgeId);
    },

    goBack(){
      history.back()
    },

    handlePagi (page) { // 分页事件

    },
    lookVideo (row) { // 查看视频
      this.$router.push(`/operation/video/detail/${row.knowledgeId}`)
    },
    changeStatus (row) { // 改变审核状态

    },
    clearSearch () { // 清除搜索
      if (!this.searchText.trim()) {
        this.fetchKnowledgeList(1)
      }
    },
    // handleChange (data, e) { // 改变状态
    //   this.$confirm(`${e ? '启用' : '禁用'}该视频后, ${e ? '该视频可在客户端正常展示' : '该视频不在客户端展示'}`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //   .then(r => {
    //     if (this.roleTitle == '超级管理员') {
    //       this.fetchSetStatus2(data.knowledgeId, e ? 1 : 3)
    //     } else {
    //       this.fetchSetStatus1(data.knowledgeId, Number(e))
    //     }
    //   })
    //   .catch(err => {
    //     data.enable = !e
    //   })
    // },
    // fetchSetStatus1 (knowledgeId, type) { // 设置显示状态
    //   changeShowStatus({
    //     knowledgeId: knowledgeId,
    //     knowledgeLife: type
    //   })
    //   .then(res => {
    //     this.$message.success('操作成功');
    //     this.fetchKnowledgeList(1)
    //   })
    //   .catch(e => {

    //   })
    // },
    // fetchSetStatus2 (knowledgeId, type) { // 设置审核状态
    //   changeAuthorityStatus({
    //     knowledgeId: knowledgeId,
    //     knowledgeStatus: type
    //   })
    //   .then(res => {
    //     this.$message.success('操作成功');
    //     this.fetchKnowledgeList(1)
    //   })
    //   .catch(e => {

    //   })
    // },
    // checkAuthorityStatus (data, type) { // 改变审核状态
    //   this.$confirm(`确定${type == 1 ? '通过' : '驳回'}该视频的发布申请吗?`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //   .then(r => {
    //     this.fetchSetStatus2(data.knowledgeId, type)
    //   })
    //   .catch(err => {

    //   })
    // },
    fetchSetStatus2(knowledgeId, type, life) {
      // 设置审核状态
      changeAuthorityStatus({
        knowledgeId: knowledgeId,
        knowledgeStatus: type,
        knowledgeLife: life,
      })
        .then((res) => {
          console.log(res);
          this.$message.success("操作成功");
          this.fetchKnowledgeList(1);
        })
        .catch((e) => {});
    },
   checkAuthorityStatus(data, type, life) {
      // if (!this.$checkAuth("isUserStatus")) {
      if (this.$checkAuth("isUserStatus")) {
        return this.$message.error("暂无对应操作权限!");
      }
      // 改变审核状态
      this.$confirm(
        `确定${type == 1 ? "通过" : "驳回"}该视频的发布申请吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then((r) => {
          this.fetchSetStatus2(data.knowledgeId, type, life);
        })
        .catch((err) => {});
    },
   
   delVideo (row) { // 删除视频
      this.$confirm(`确定删除该视频吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        console.log(row);
      })
      .catch(err => {

      })
    },
    handleSearch () { // 搜索事件
      if (this.videoLoading) return;
      if (!this.searchText.trim()) {
        return this.$message.error('搜索内容不能为空')
      };
      this.fetchKnowledgeList(1)
    },
    goAddVideo () { // 进入添加视频
      this.$router.push('/operation/add?type=2')
    },

    fetchKnowledgeList (index) { // 查询知识列表
      this.videoLoading = true
      getKnowledgeList({
        index,
        count: this.pageSize,
        queryParam: {
          knowledgeType: 1,
          enterpriseId: this.enterpriseId,
          knowledgeName: this.searchText || null
        }
      })
      .then(res => {
        this.videoLoading = false;
        let list = res.data.data.list || [];
        list.forEach(item => {
          // item.createDate = formatDate(item.createDate, 'ZH');
          item.createDate = formatDate(item.createDate);
          item.id = item.knowledgeId.slice(5);
          item.enable = Boolean(item.knowledgeLife)
        });
        this.videoList = list;
        this.videoTotal = res.data.data.totalRecord
      })
      .catch(e => {
        this.videoLoading = false;
      })
    },
  },
  created () {
    let roleTitle = sessionStorage.getItem('roleTitle') || '';
    this.roleTitle = roleTitle;
    let enterpriseId = sessionStorage.getItem('enterpriseId');
    if (roleTitle == '公司') {
      this.enterpriseId = enterpriseId
    };
    this.fetchKnowledgeList(1)
  }
}
</script>
<style lang="scss">



</style>
